<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI 智能助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#6366F1',
              secondary: '#F4F4F5'
            },
            borderRadius: {
              none: '0px',
              sm: '2px',
              DEFAULT: '4px',
              md: '8px',
              lg: '12px',
              xl: '16px',
              '2xl': '20px',
              '3xl': '24px',
              full: '9999px',
              button: '4px'
            }
          }
        }
      }
    </script>
    <style>
      body {
        font-family: 'Segoe UI', sans-serif;
      }
      .font-logo {
        font-family: 'Pacifico', serif;
      }
      .chat-bubble {
        max-width: 70%;
      }
      .scrollbar-hidden::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
  </head>
  <body class="bg-white min-h-screen flex">
    <!-- 左侧菜单栏 -->
    <aside class="w-64 bg-secondary flex flex-col border-r border-gray-200">
      <!-- 标题区域 -->
      <div class="p-6 border-b border-gray-200">
        <h1 class="text-2xl font-logo text-primary">logo</h1>
      </div>
      <!-- 创建新对话按钮 -->
      <div class="p-4">
        <button
          class="!rounded-button whitespace-nowrap w-full py-3 px-4 bg-primary text-white flex items-center justify-center hover:bg-indigo-700 transition-colors"
        >
          <i class="fas fa-plus mr-2"></i>
          创建新对话
        </button>
      </div>
      <!-- 历史对话列表 -->
      <div class="flex-1 overflow-y-auto scrollbar-hidden">
        <div class="px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">
          历史对话
        </div>
        <div class="space-y-1 px-2">
          <!-- 历史对话项 -->
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">如何优化网站性能</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg bg-white border border-primary shadow-sm">
            <div class="flex items-center">
              <i class="fas fa-comment text-primary mr-2"></i>
              <span class="truncate font-medium">JavaScript 闭包详解</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">React 性能优化技巧</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">Tailwind CSS 使用指南</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">数据库设计最佳实践</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">API 安全防护策略</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">微服务架构设计</span>
            </div>
          </a>
          <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 transition-colors truncate">
            <div class="flex items-center">
              <i class="fas fa-comment text-gray-400 mr-2"></i>
              <span class="truncate">机器学习入门指南</span>
            </div>
          </a>
        </div>
      </div>
      <!-- 用户信息 -->
      <div class="p-4 border-t border-gray-200">
        <div class="flex items-center">
          <div
            class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold"
          >
            U
          </div>
          <div class="ml-3">
            <div class="text-sm font-medium">用户名称</div>
            <div class="text-xs text-gray-500">user@example.com</div>
          </div>
        </div>
      </div>
    </aside>
    <!-- 右侧聊天主界面 -->
    <main class="flex-1 flex flex-col">
      <!-- 聊天记录区域 -->
      <div class="flex-1 overflow-y-auto p-6 scrollbar-hidden">
        <div class="max-w-4xl mx-auto space-y-6">
          <!-- AI 消息 -->
          <div class="flex justify-start">
            <div class="chat-bubble bg-gray-100 rounded-2xl rounded-tl-none p-4">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3 flex-shrink-0"
                >
                  AI
                </div>
                <div>
                  <div class="font-bold text-sm mb-1">AI 智能助手</div>
                  <p class="text-gray-700">
                    您好！我是您的 AI
                    智能助手。我可以帮助您解答各种问题、提供信息查询服务、协助处理文档等。请问有什么我可以帮您的吗？
                  </p>
                </div>
              </div>
              <div class="flex mt-2 space-x-2">
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="far fa-copy mr-1"></i> 复制
                </button>
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="fas fa-redo mr-1"></i> 重新生成
                </button>
              </div>
            </div>
          </div>
          <!-- 用户消息 -->
          <div class="flex justify-end">
            <div class="chat-bubble bg-primary rounded-2xl rounded-tr-none p-4 text-white">
              <div class="flex items-start">
                <div class="text-right">
                  <div class="font-bold text-sm mb-1">您</div>
                  <p>你好，我想了解一下如何优化网站的加载速度？</p>
                </div>
                <div
                  class="w-8 h-8 rounded-full bg-indigo-800 flex items-center justify-center text-white font-bold ml-3 flex-shrink-0"
                >
                  U
                </div>
              </div>
            </div>
          </div>
          <!-- AI 消息 -->
          <div class="flex justify-start">
            <div class="chat-bubble bg-gray-100 rounded-2xl rounded-tl-none p-4">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3 flex-shrink-0"
                >
                  AI
                </div>
                <div>
                  <div class="font-bold text-sm mb-1">AI 智能助手</div>
                  <p class="text-gray-700">
                    优化网站加载速度是一个多方面的工程，我可以为您提供以下几个关键优化建议：
                  </p>
                  <ol class="list-decimal list-inside mt-2 space-y-1">
                    <li>压缩和优化图片资源，使用现代格式如 WebP</li>
                    <li>启用浏览器缓存和服务器端缓存机制</li>
                    <li>减少 HTTP 请求次数，合并 CSS 和 JavaScript 文件</li>
                    <li>使用内容分发网络 (CDN) 加速静态资源</li>
                    <li>优化服务器响应时间，使用高效的后端技术</li>
                  </ol>
                  <p class="mt-2">您希望我详细解释其中某个方面吗？</p>
                </div>
              </div>
              <div class="flex mt-2 space-x-2">
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="far fa-copy mr-1"></i> 复制
                </button>
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="fas fa-redo mr-1"></i> 重新生成
                </button>
              </div>
            </div>
          </div>
          <!-- 用户消息 -->
          <div class="flex justify-end">
            <div class="chat-bubble bg-primary rounded-2xl rounded-tr-none p-4 text-white">
              <div class="flex items-start">
                <div class="text-right">
                  <div class="font-bold text-sm mb-1">您</div>
                  <p>请详细解释一下图片优化的方法。</p>
                </div>
                <div
                  class="w-8 h-8 rounded-full bg-indigo-800 flex items-center justify-center text-white font-bold ml-3 flex-shrink-0"
                >
                  U
                </div>
              </div>
            </div>
          </div>
          <!-- AI 消息 -->
          <div class="flex justify-start">
            <div class="chat-bubble bg-gray-100 rounded-2xl rounded-tl-none p-4">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3 flex-shrink-0"
                >
                  AI
                </div>
                <div>
                  <div class="font-bold text-sm mb-1">AI 智能助手</div>
                  <p class="text-gray-700">图片优化是提升网站性能的重要环节，以下是详细的方法：</p>
                  <div class="mt-3 space-y-3">
                    <div>
                      <h4 class="font-semibold">1. 选择合适的图片格式</h4>
                      <ul class="list-disc list-inside mt-1 text-sm space-y-1">
                        <li>JPEG：适合照片类图像，支持高压缩率</li>
                        <li>PNG：适合图形和需要透明度的图像</li>
                        <li>WebP：Google 开发的现代格式，提供更好的压缩效果</li>
                        <li>AVIF：最新的图像格式，压缩率更高</li>
                      </ul>
                    </div>
                    <div>
                      <h4 class="font-semibold">2. 图片压缩技术</h4>
                      <ul class="list-disc list-inside mt-1 text-sm space-y-1">
                        <li>有损压缩：在视觉质量可接受范围内大幅减小文件大小</li>
                        <li>无损压缩：保持图像质量的同时减小文件大小</li>
                        <li>使用工具如 TinyPNG、ImageOptim 等进行批量压缩</li>
                      </ul>
                    </div>
                    <div>
                      <h4 class="font-semibold">3. 响应式图片</h4>
                      <ul class="list-disc list-inside mt-1 text-sm space-y-1">
                        <li>使用 srcset 属性提供多种分辨率的图片</li>
                        <li>使用 picture 元素针对不同设备提供不同格式</li>
                        <li>实现懒加载 (Lazy Loading) 减少初始页面加载时间</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex mt-2 space-x-2">
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="far fa-copy mr-1"></i> 复制
                </button>
                <button class="text-xs text-gray-500 hover:text-gray-700 flex items-center">
                  <i class="fas fa-redo mr-1"></i> 重新生成
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 输入区域 -->
      <div class="border-t border-gray-200 p-4">
        <div class="max-w-4xl mx-auto">
          <div class="flex items-end bg-white rounded-2xl border border-gray-300 p-2 shadow-sm">
            <textarea
              class="flex-1 py-2 px-3 text-gray-700 focus:outline-none resize-none max-h-32"
              placeholder="输入您的消息..."
              rows="1"
            ></textarea>
            <button
              class="!rounded-button whitespace-nowrap ml-2 py-2 px-4 bg-primary text-white hover:bg-indigo-700 transition-colors flex items-center justify-center"
            >
              <i class="fas fa-paper-plane"></i>
              <span class="ml-2">发送</span>
            </button>
          </div>
          <div class="mt-2 text-xs text-gray-500 flex justify-between">
            <div>按 Enter 发送，Shift + Enter 换行</div>
            <div>AI 智能助手可能会出错，请核实重要信息</div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
